<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <head>
        <title>Event content</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <link href="css/blog.css" rel="stylesheet" type="text/css"/>
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="blog-masthead">
            <div class="container">
                <nav class="blog-nav">
                    <a class="blog-nav-item active" href="events.xhtml"><i class="glyphicon glyphicon-list-alt"></i> Event Board</a>                                       
                </nav>
            </div>
        </div><!--end bolg nav-->
        <div class="container">
            <br/>
            <div class="row">
                <div class="col-sm-8 blog-main">
                    <div class="blog-post">
                        <h2 class="blog-post-title">#{eventContent.eventinfo.eventName}
                            <span class="text-primary pull-right">
                                <a class="btn btn-link"><i class="fa fa-key fa-fw"></i>#{eventContent.eventinfo.eventID}</a>
                                <a href="#" class="btn btn-link"><i class="fa fa-tag fa-fw"></i>#{eventContent.eventinfo.eventType}</a>
                                <a href="#" class="btn btn-link"><i class="fa fa-edit fa-fw"></i>Edit</a>
                                <a href="#" class="btn btn-link"><i class="fa fa-clock-o fa-fw"></i>#{eventContent.eventinfo2.created}</a>
                            </span>
                        </h2>
                        <span class="label label-info"><i class="fa fa-clock-o fa-fw"></i>#{eventContent.eventinfo.timeStart} - #{eventContent.eventinfo.timeEnd}                              
                        </span>
                        <span class="label label-primary pull-right"><i class="fa fa-map-marker fa-fw"></i>#{eventContent.eventinfo2.address}</span>
                        <hr/>
                        <p><Strong>#{eventContent.eventinfo2.shortdes}</Strong></p>
                        <img class="img-responsive" src="#{eventContent.eventinfo2.avatar}"/>
                        <h:outputText value="${eventContent.eventinfo.description}" escape="false"/>                        
                        <blockquote>
                            <p class="text-muted"><i class="fa fa-comments fa-fw"></i><em>#{eventContent.eventinfo.totalComments} comments</em></p>
                        </blockquote>
                    </div><!-- /.blog-post -->                    
                </div><!-- /.blog-main -->
                <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
                    <div class="sidebar-module sidebar-module-inset">
                        <h4>About</h4>
                        Write description here...
                    </div>
                    <div class="sidebar-module">
                        <h4><span class="label label-info"><i class="fa fa-bookmark fa-fw"></i>Events</span></h4>
                        <ol class="list-unstyled">
                            <c:forEach var="i" items="#{eventContent.events}">
                                <li><a href="event.xhtml?eventId=#{i.eventID}"><em>#{i.eventName}</em></a></li>
                            </c:forEach>                            
                        </ol>
                    </div>
                    <div class="sidebar-module">
                        <h4><span class="label label-info"><i class="fa fa-tags fa-fw"></i>Tags</span></h4>
                        <ol class="list-unstyled">
                            <li><a href="event.xhtml?tag=talkshow">Talk Show</a></li>
                            <li><a href="event.xhtml?tag=game">Game</a></li>
                            <li><a href="event.xhtml?tag=meeting">Meeting</a></li>
                            <li><a href="event.xhtml?tag=other">Other</a></li>
                        </ol>
                    </div>
                </div><!-- /.blog-sidebar -->

            </div><!-- /.row -->
        </div><!--end blog container-->
        <div class="blog-footer">
            <p><a href="#">Blue Pumpkin</a> is a project maintained by Group 1 - C1209I.
                                    <br/>@ Copyright Blue Pumpkin 2014</p>
        </div><!--end blog footer-->
    </body>
</html>
